<template>
  <div class="char3">
    <!-- 自定义一个div来装我们的图 -->
    <calendar :show="show" :dayClick="onChange" />
    <div class="top">
      <!-- <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="fromtime"
        @focus="show=true;seltime=true"
      ></el-input>
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="totime"
        @focus="show=true;seltime=false"
      ></el-input> -->
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          unlink-panels
          range-separator="至"
          :start-placeholder="value2[0]"
          :end-placeholder="value2[1]"
          :shortcuts="shortcuts"
          value-format="YYYYMMDD"
          @change="draw"
        >
        </el-date-picker>
      </div>
    </div>
    <div id="eschar3" style="height: 300px; margin: auto"></div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { saleprice } from "@/api/echarts";
let echarts = require("echarts");
export default {
  name: "eschar",
  data() {
    return {
      fromtime: dayjs().format("YYYYMMDD") - 6,
      totime: dayjs().format("YYYYMMDD"),
      seltime: true,
      show: false,
      sale: {},
      num: 0,
      datanum: 0,
      option: {
        //标题
        title: { text: "销售情况" },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.8)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
          color: "#6a717b",
        },
        //工具
        toolbox: {
          //是否显示
          show: true,
          feature: {
            //折线图 与 柱状图 切换
            magicType: {
              type: ["line", "bar"],
            },
            //下载
            saveAsImage: {},
          },
        },
        //节点显示
        legend: {
          data: this.num,
        },
        //x轴数据
        xAxis: {
          //   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          data: [],
        },
        //y轴数据
        yAxis: {
          type: "value",
          axisLabel: {
            interval: 1, //横轴信息全部显示
            rotate: -30, //-15度角倾斜显示

            fontSize: 18,
            color: "#666",
          },

          data: [],
        },
        series: [
          {
            //初始类型
            name: "销售额",
            type: "line",
            barWidth: 26,
            data: [],
            label: {
              show: true,
              position: "insideRight",
              color: "blue", //color of value
              fontSize: 18,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#0590eb", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#08e3f1", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: [0, 15, 15, 0],
              shadowColor: "rgba(0,0,0,0.1)",
              shadowBlur: 3,
              shadowOffsetY: 3,
            },
          },
        ],
      },
      shortcuts: [
        {
          text: "最近一周",
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          })(),
        },
        {
          text: "最近一个月",
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          })(),
        },
        {
          text: "最近三个月",
          value: (() => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          })(),
        },
      ],
      value2: [dayjs().format("YYYYMMDD") - 6, dayjs().format("YYYYMMDD")],
    };
  },
  methods: {
    async draw() {
      //通过echarts初始化我们的div
      let myChart = echarts.init(document.getElementById("eschar3"));
      //为这个echarts的图添加属性
      this.option.series[0].data = [];
      this.datanum = 0;
      const result = await saleprice.post({
        todayfrom: this.value2[0],
        todayto: this.value2[1],
      });
      result.data = JSON.parse(result.data);
      this.ds_order = result.data;
      //result.data[0].receivablesdate.format("YYYYMMDD");
      this.sale.pn = [];
      this.sale.num = [];
      this.num = 0;
      this.ds_order.sort((a, b) => a.time - b.time);
      this.ds_order.forEach((ele) => {
        this.sale.pn.push(ele.time);
        this.sale.num.push(ele.price);
        this.num = this.num + ele.price;
        this.option.series[0].data.push({
          value: ele.price,
          name: ele.time,
        });
      });
      this.option.series[0].name = "销售额：" + parseInt(this.num, 10);
      //this.option.legend.data=["销售额"];
      console.log(this.option.legend.data);
      this.option.yAxis.data = this.sale.num;
      this.option.xAxis.data = this.sale.pn;
      //console.log(this.option.xAxis.data);
      myChart.setOption(this.option, true);
      window.onresize = function () {
        myChart.resize();
      };
    },

    // onChange(date) {
    //   if (this.seltime) {
    //     this.fromtime = date.format("YYYYMMDD");
    //   } else {
    //     this.totime = date.format("YYYYMMDD");
    //   }
    //   return true;
    // }
  },
  watch: {
    //数据变化时自动重画，在控制台修改message,会自动重画
    // value2: function() {
    //   console.log("1");
    //   this.draw();
    // }
  },
  mounted() {
    //页面加载的时候，调用画图方法，画图
    this.draw();
  },
};
</script>
<style scoped>
.char3 {
  text-align: center;
}
.top {
  margin: 20px;
}
.el-button {
  margin-top: 20px;
}
.top .el-input {
  max-width: 200px;
  width: 40%;
  margin-right: 10px;
}
</style>